<template>
  <div class="dashboard">
    <div class="dash-box">
      <div class="dash-left">
        <!-- 公告 -->
        <el-card class="left-card-notice" shadow="never">
          <template #header>
            <div class="card-header">
              <span>公告</span>
            </div>
          </template>
          <div class="notice-body">
            <NoticesCard/>
          </div>
        </el-card>
        <!-- 快捷操作 -->
        <el-card class="left-card-fun" shadow="never">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="fun-body">
            <ShortcutsCard/>
          </div>
        </el-card>
      </div>

      <div class="dash-right">
        <!-- 用户 -->
        <el-card class="right-card-user" shadow="never">
          <template #header>
            <div class="card-header">
              <span>用户</span>
              <div class="calendar">
                <img src="@/assets/svg/calendar.svg" alt="" />
                <span>{{ time }}</span>
              </div>
            </div>
          </template>
          <div class="user-body">
            <UserCard />
          </div>
        </el-card>
        <!-- 图片 -->
        <el-card class="right-card-img" shadow="never">
          <img src="@/assets/svg/home-design.svg" alt="" />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { formatNowTime } from '@/utils/formatDate.js'
import { ref } from 'vue-demi'
import UserCard from './components/UserCard.vue'
import NoticesCard from './components/NoticesCard.vue';
import ShortcutsCard from './components/ShortcutsCard.vue';

// 当前时间
const time = ref(formatNowTime(Date.now()))

const getNewNowDate = () => {
  setInterval(() => {
    time.value = formatNowTime(Date.now())
  }, 1000)
}
getNewNowDate()
</script>

<style lang="less" scoped>
.dashboard {
  width: 100%;
  height: 100%;

  .dash-header {
    margin-bottom: 15px;
    .dash-h-card {
      height: 150px;
    }
  }
  .dash-box {
    width: 100%;
    height: 100%;
    display: flex;

    .dash-left {
      width: 58%;
      height: 100%;
      .left-card-notice {
        width: 100%;
        // height: 300px;
        height: 270px;
      }
      .left-card-fun {
        margin-top: 15px;
        width: 100%;
        // height: 300px;
      }
    }
    .dash-right {
      flex: 1;
      margin-left: 15px;
      .right-card-user {
        height: 230px;
        .card-header {
          display: flex;
          justify-content: space-between;
          .calendar {
            align-items: center;
            position: relative;
            img {
              position: absolute;
              top: -6px;
              left: -26px;
              width: 23px;
              height: 30px;
            }
            span {
              font-size: 15px;
              color: #303133;
            }
          }
        }
      }
      .right-card-img {
        width: 100%;
        margin-top: 15px;
        img {
          width: 100%;
        }
      }
    }
  }
}

/deep/ .el-card__header {
  padding: 15px !important;
}
</style>
